<template>
  <view class="page">
    <view v-if="$data.info">
      <view class="top">
        <view class="basic">
          <view class="basic_img">
            <image :src="$data.info._picurl" />
          </view>
          <view class="basic_content">
            <view class="basic_content--title">
              {{ $data.info.serviceTitle }}
            </view>
            <view class="basic_content--price text-price">
              {{ $data.info.firstTotalPrice }}
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 保障 </view>
          <view class="row_right">
            <view class="flex align-center flex-warp">
              <view
                class="margin-right"
                v-for="(item, index) of $data.info.serviceSnapshot
                  .serviceTagNameArr"
                :key="index"
              >
                <up-icon
                  name="checkmark-circle"
                  color="#111111"
                  labelColor="#111111"
                  :label="item"
                  :size="18"
                  :labelSize="16"
                ></up-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 温馨提示 </view>
          <view class="row_right">
            {{ removeHtmlTags($data.info.serviceSnapshot.tips) }}
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 订单总价 </view>
          <view class="row_right text-price">{{ $data.info.totalPrice }}</view>
        </view>
        <view class="row">
          <view class="row_left"> 优惠 </view>
          <view class="row_right text-price">
            -{{ $data.info.couponPrice }}
          </view>
        </view>
        <!-- <view class="row" v-if="$data.info.fast">
          <view class="row_left"> 加急 </view>
          <view class="row_right text-price">
            {{ $data.info.fast }}
          </view>
        </view> -->
        <view class="row">
          <view class="row_left"> 实付金额 </view>
          <view class="row_right">
            <text class="text-price row_right--price">
              {{ $data.info.firstTotalPrice }}
            </text>
          </view>
        </view>
      </view>
      <view class="margin-top padding-lr bg-white">
        <view v-if="false" class="row">
          <view class="row_left"> 服务时间 </view>
          <view class="row_right">
            {{ $data.info._firstStartServicedAt }}
          </view>
        </view>
        <view v-if="false" class="row">
          <view class="row_left"> 服务地址 </view>
          <view class="row_right">
            {{ $data.info.addressSnapshot.locationAddress }}
          </view>
        </view>
        <view v-if="false" class="row">
          <view class="row_left"> 联系人 </view>
          <view class="row_right">
            <text> {{ $data.info.addressSnapshot.name }}</text>
            <text v-if="$data.info.addressSnapshot">
              ({{ $data.info.addressSnapshot.sex == 1 ? "先生" : "女士" }})
            </text>
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 订单编号 </view>
          <view class="row_right">
            <view class="flex justify-between align-center">
              <view>
                {{ $data.info.localNo }}
              </view>
              <view class="copy" @tap="onCopy($data.info.localNo)">复制</view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row_left"> 下单时间 </view>
          <view class="row_right">
            {{ $data.info._createdAt }}
          </view>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="foot foot_box justify-end">
        <mg-pay-button
          :mode="sdkData.mode"
          :orderId="sdkData.orderId"
          :orderStatus="sdkData.orderStatus"
          :refundId="sdkData.refundId"
          :refundTotalAmount="sdkData.refundTotalAmount"
          :applyRefundParams="sdkData.applyRefundParams"
          :localNo="$data.localNo"
          :douYinPayJson="$data.douYinPayJson"
          :workSecondPrice="$data.workSecondPrice"
          :goodsType="$data.goodsType"
        ></mg-pay-button>
      </view>
    </view>
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick, computed } from "vue";
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
import {
  getOrderDetail,
  refundOrderDetail,
} from "../../../../api/Interface/order";
import errorCode from "../../../../utils/http/errorCode";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import duration from "dayjs/plugin/duration";
import BasicConfig from "../../../../utils/config";
import {
  hotelOrderAfterSaleStatus,
  orderRefundStatusConfig,
  orderSourceType,
  orderStatus,
  orderStatusConfig,
  searchOrderStatus,
} from "../../../../enums/order";
import { jumpPage } from "../../../../utils/route/route";
import { useImgSrc } from "../../../../hooks/useImg";
import { removeHtmlTags } from "../../../../utils/utils";
import { useUpdateRefund } from "../../../../hooks/useOrder";
dayjs.extend(duration);
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  localNo: "",
  orderServiceId: "",
  info: null,
  douYinPayJson: null, // 抖音退款
  workSecondPrice: 0,
  goodsType: null, // 商品品类
});
const sdkData = reactive({
  mode: 1, // 组件使用模式 1.已下单 2.未下单
  orderStatus: 1, // mode为1时, 0：继续支付 ,1：申请退款,2：退款中,3：退款成功 ,4：退款失败
  orderId: "", // 开发者订单系统的交易订单号
  refundId: "", // 开发者订单系统的退款单号，用于查看退款详情； orderStatus为2,3,4时必传
  refundTotalAmount: 0, // 针对交易系统之前的老订单申请退款
  applyRefundParams: null, // 退款参数（仅uniapp或taro开发需要，原生抖音小程序不需要）
});
const onCopy = (text) => {
  uni.setClipboardData({
    data: text.toString(),
    success: (result) => {
      BasicConfig.toast("复制成功");
    },
    fail: (error) => {
      console.log("复制失败", error);
      BasicConfig.toast("复制失败!");
    },
  });
};
const init = () => {
  refundOrderDetail({
    localNo: $data.localNo,
    orderServiceId: $data.orderServiceId,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.douYinPayJson = res.data.douYinPayJson;
      $data.workSecondPrice = res.data.workSecondPrice;
      sdkData.refundId = res.data.localNo;
      console.log(" sdkData.refundId", sdkData.refundId);
      const config = orderRefundStatusConfig[res.data.refundStatus];
      sdkData.orderStatus = config?.dyValue;
      if ($data.douYinPayJson) {
        sdkData.refundTotalAmount = $data.douYinPayJson.total_amount;
        if ($data.douYinPayJson.item_order_info_list) {
          $data.douYinPayJson.item_order_info_list.forEach((item) => {
            item.itemOrderId = item.item_order_id;
            // item.refundAmount = item.price;
          });
        }
      }
    }
  });

  //   useUpdateRefund({
  //     localNo: $data.localNo,
  //     orderServiceId: $data.orderServiceId,
  //   }).then((res) => {
  //     console.log("useUpdateRefund", res);
  //     if (res.code === errorCode.success) {
  //       $data.douYinPayJson = res.data.douYinPayJson;
  //       $data.workSecondPrice = res.data.workSecondPrice;
  //       sdkData.orderStatus = res.data._orderStatus;
  //       if ($data.douYinPayJson) {
  //         sdkData.refundTotalAmount = $data.douYinPayJson.total_amount;
  //       }
  //     }
  //   });
  getOrderDetail({
    localNo: $data.localNo,
    orderServiceId: $data.orderServiceId,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.info = res.data;
      if ($data.info) {
        sdkData.orderId = $data.info.localNo;
        $data.goodsType = $data.info.dyGoodsType;
        $data.info._picurl = useImgSrc($data.info.picurl);
        $data.info.addressSnapshot = $data.info.addressSnapshot ?? {};
        const { firstStartServicedAt, createdAt, countDown } = res.data;
        $data.info._firstStartServicedAt = firstStartServicedAt
          ? dayjs(firstStartServicedAt)
              .locale("zh-cn")
              .format("YYYY-MM-DD dddd HH:mm")
          : "";
        $data.info._createdAt = createdAt
          ? dayjs(createdAt).locale("zh-cn").format("YYYY-MM-DD dddd HH:mm")
          : "";
      }
    }
  });
};
/** 是否下架 domesticServiceStatus 0.已下架 1.已上架 */
const isDown = computed(() => {
  const { domesticServiceStatus } = $data.info;
  return domesticServiceStatus == 0;
});
onLoad((options) => {
  uni.setNavigationBarTitle({
    title: "售后",
  });
  $data.localNo = options.localNo;
  $data.orderServiceId = options.orderServiceId;
});
onShow(() => {
  nextTick(() => {
    init();
  });
});
onReady(() => {});
</script>

<style lang="scss" scoped>
@import "../../../static/style/order/detail/common.scss";
</style>
